<script setup>
import { ref, onMounted} from 'vue';
import { queryAllApi, addDeptApi, queryByIdApi, updateDeptApi, deleteDeptApi } from '@/api/dept';
import {ElMessage, ElMessageBox} from 'element-plus';

//钩子函数
onMounted(() =>{
  search();
})
//查询
const search = async() => {
  // const result = await axios.get('https://apifoxmock.com/m1/3128855-1224313-default/depts');
  // if(result.data.code) {
  //   deptList.value = result.data.data;
  // }
  const result = await queryAllApi();
  if(result.code) {
    deptList.value = result.data;
  }
}

const deptList= ref([]);


// 删除部门 - 根据ID删除部门
const handleDelete = (id) => {
  console.log(`Delete item with ID ${id}`);
  // 在这里实现删除功能
};

//Dialog对话框
const dialogFormVisible = ref(false);
const formTitle =ref('');
const dept = ref({name:''});
//新增部门
const addDept =()=> {
  dialogFormVisible.value = true;
  formTitle.value = '新增部门';
  dept.value = {name: ''};
  //重置表单的校验信息
  if(deptFormRef.value) {
    deptFormRef.value.resetFields();
  }
}
//保存部门
const save = async () => {
  //表单校验
  if (!deptFormRef.value) return;
  deptFormRef.value.validate(async(valid) => { //valid表示是否通过
    if (valid) { //通过
      // 提交表单
      let result = null;
      if (dept.value.id) {
        result = await updateDeptApi(dept.value) // 修改
      } else {
        result = await addDeptApi(dept.value) // 新增
      } 
      if (result.code) { //成功
        //提示信息
        ElMessage.success('操作成功');
        //关闭对话框
        dialogFormVisible.value = false;
        //查询
        search();
      } else { //失败
        ElMessage.error(result.msg);
      }
    } else {//不通过
      ElMessage.error('表单校验不通过');
    }
  })

}

// 表单验证规则
const rules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
})

const deptFormRef = ref();

//编辑
const edit = async(id) => {
  formTitle.value = '编辑部门';
  //重置表单的校验信息
   if(deptFormRef.value) {
    deptFormRef.value.resetFields();
  }
  const result = await queryByIdApi(id);
  if(result.code) {
    dialogFormVisible.value = true;
    dept.value = result.data;
  }
}

//删除
const deleteById = (id) => {
  //弹出确认框
  ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 删除部门
    const result = await deleteDeptApi(id)
    if(result.code){
      ElMessage.success('删除成功')
      search()
    } else {
      ElMessage.error(result.msg);
    }
  })
}
</script>

<template>
  <h1>部门管理</h1>

  <!-- 按钮靠页面右侧显示 -->
   <div class="contain" style="margin: 30px 0px;">
  <el-button type="primary" @click="addDept">+ 新增部门</el-button>
</div>
  <!-- 表格 -->
  <el-table :data="deptList" border style="width: 100%;">
    <el-table-column type="index" label="序号" width="100" align="center"/>
    <el-table-column prop="name" label="部门名称" width="300" align="center"/>
    <el-table-column prop="updateTime" label="最后修改时间" width="300" align="center"/>
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
        <el-button size="small" type="danger" @click="deleteById(scope.row.id)"><el-icon><DeleteFilled /></el-icon>删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 新增部门的对话框 -->
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="30%" @close="resetForm" >
    <el-form :model="dept" :rules ='rules' ref="deptFormRef">
      <el-form-item label="部门名称" prop="name" label-width="80px">
        <el-input v-model="dept.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>
